<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-26 16:14:58
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-16 11:24:52
 * @FilePath: \robot\src\components\CameraVideo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    v-loading="loading"
    element-loading-background="#000"
    class="w-full h-full"
  >
    <video
      ref="video"
      class="w-full h-full object-fill"
      autoplay
      muted
      @dblclick="handleFullScreen"
    />
  </div>
</template>
<script setup lang="ts">
import { toRefs, onMounted } from "vue";
import usePlayer from "@/composables/usePlayer";

interface CameraData {
  rtsp: string;
  id: number;
}

const props = defineProps<{
  data: CameraData;
}>();
const { data } = toRefs(props);
const { initPlayer, video, handleFullScreen, loading } = usePlayer();

onMounted(() => {
  initPlayer(data.value);
});
</script>
